<template>
  <el-dialog
    title="采购计划单明细"
    :visible="selectImportMaterialDialog"
    width="70%"
    class="order-importMaterial-select"
    @close="selectImportMaterialClose"
  >
    <div class="app-container order-importMaterial-box">
      <div class="layout-box">
        <el-form :inline="true" class="ma-search" style="margin-bottom: 15px">
          <div class="ma-left">
            <el-form-item style="width: 150px">
              <el-input
                v-model="queryDetail.ppNumber"
                placeholder="销售订单号"
                clearable
                size="small"
              />
            </el-form-item>
            <el-form-item style="width: 120px">
              <el-select
                class="picker-data"
                placeholder="料品大类"
                clearable
                v-model="queryDetail.searchValue"
              >
                <el-option
                  v-for="(item, index) in sortData"
                  :key="index"
                  :label="item.sortName"
                  :value="item.sortId"
                />
              </el-select>
            </el-form-item>
            <el-form-item style="width: 120px">
              <el-input
                v-model="queryDetail.invCode"
                placeholder="物料编码"
                clearable
                size="small"
              />
            </el-form-item>
            <el-form-item style="width: 150px">
              <el-input
                v-model="queryDetail.invName"
                placeholder="物料名称"
                clearable
                size="small"
              />
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                icon="el-icon-search"
                size="mini"
                @click="search"
                >搜索</el-button
              >
            </el-form-item>
          </div>

          <div>
            <el-row :gutter="10" style="margin-left: -0px; margin-right: 0px">
              <el-col :span="1.5">
                <el-button
                  type="primary"
                  plain
                  icon="el-icon-menu"
                  size="mini"
                  @click="handleCheckleDetail"
                  >查询所有
                </el-button>
              </el-col>
              <el-col :span="1.5">
                <el-button
                  type="primary"
                  plain
                  icon="el-icon-menu"
                  :class="{ 'is-plan': continuityStatus }"
                  size="mini"
                  @click="handleContinuity"
                  >连选
                </el-button>
              </el-col>
            </el-row>
          </div>
        </el-form>

        <!-- 明细列表 -->
        <el-table
          :data="detailTableData"
          border
          style="width: 100%"
          v-loading="detailLoading"
          :height="detailMaxHeight"
          ref="detailTable"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            prop="salesman"
            label="销售员"
            align="center"
            width="80"
            v-if="needType == '0'"
          >
          </el-table-column>
          <el-table-column
            prop="pp_number"
            label="销售订单号"
            align="center"
            width="120"
            v-if="needType == '0'"
          >
          </el-table-column>
          <el-table-column
            prop="pp_date"
            label="订单交期"
            align="center"
            width="100"
            v-if="needType == '0'"
          >
            <template v-slot="scope">
              <span
                v-if="
                  scope.row.pp_date !== undefined && scope.row.pp_date !== null
                "
                >{{ scope.row.pp_date | inMaterTime }}</span
              >
            </template>
          </el-table-column>
          <el-table-column
            prop="inv_code"
            label="物料编码"
            align="center"
            width="120"
          >
          </el-table-column>
          <el-table-column
            label="物料名称"
            align="center"
            v-if="needType == '0'"
          >
            <template v-slot="scope">
              <div>
                <span
                  >{{ scope.row.inv_name }} {{ scope.row.inv_attribute }}</span
                >
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="物料名称"
            align="center"
            v-if="needType == '1'"
          >
            <template v-slot="scope">
              <div>
                <span
                  >{{ scope.row.inv_name }} {{ scope.row.inv_attribute }}</span
                >
              </div>
            </template>
          </el-table-column>
            <el-table-column
            label="需求日期"
            align="center"
            width="120"
          >
            <template v-slot="scope">
              <div>
                <span v-if="scope.row.need_date!==undefined&&scope.row.need_date!==null"
                  >{{ scope.row.need_date | inMaterTime }} </span
                >
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="quantity"
            label="需求数量"
            width="110"
            align="center"
          >
            <template v-slot="scope">
              <div style="text-align: right">
                <span>{{ scope.row.quantity }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="wi_quantity"
            label="已采数量"
            align="center"
            width="110"
          >
            <template v-slot="scope">
              <div style="text-align: right">
                <span>{{ scope.row.wi_quantity }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="surplus"
            label="未采数量"
            align="center"
            width="110"
          >
            <template v-slot="scope">
              <div style="text-align: right">
                <span>{{ scope.row.surplus }}</span>
              </div>
            </template>
          </el-table-column>
         
          <el-table-column type="selection" width="50" align="center">
          </el-table-column>
        </el-table>
      </div>
      <!-- 明细分页 -->
      <pagination
        v-if="detailTotal > 0"
        :total="detailTotal"
        :page.sync="queryDetail.pageNum"
        :limit.sync="queryDetail.pageSize"
        @pagination="getDetailList"
      />
    </div>
    <div class="ImportMaterial-success">
      <div>
        <el-button
          :disabled="successStatus"
          type="primary"
          @click="handleImportMaterialSuccess"
          >确定</el-button
        >
        <el-button @click="handleClose">取消</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import {
  listImportDetail, //查询明细
  materialSort,
} from "../../api/order";

export default {
  data() {
    return {
      // 已选物料
      selectData: [],
      // 明细遮罩层
      detailLoading: true,
      //明细查询参数
      queryDetail: {
        pageNum: 1,
        pageSize: 100,
        needType: "",
        invName: "",
        invCode: "",
        ppNumber: "",
        searchValue: "",
        workType: "",
      },
      //连选
      continuityStatus: false,
      isClose: true,

      // 明细总条数
      detailTotal: 0,
      // 明细最大高度
      detailMaxHeight: null,
      //物料大类数据
      sortData: [],
      //物料大类下标
      sortIndex: null,
      //明细数据
      detailTableData: [],
      successStatus: true,
      demo: {},
    };
  },
  props: {
    selectImportMaterialDialog: {
      type: Boolean,
      default: true,
    },
    needType: {
      type: String,
      default: "0",
    },
    optionsworkType: {
      type: Array,
      default: () => {
        return [];
      },
    },
    // 小数位数
    decimal: {
      type: String,
      default: "2",
    },
  },
  created() {
    this.getMaterialSort();
    this.getDetailList();
  },
  methods: {
    //查询所有明细
    handleCheckleDetail() {
      this.queryDetail = {
        pageNum: 1,
        pageSize: 100,
        invName: "",
        invCode: "",
        ppNumber: "",
        searchValue: "",
        workType: "",
      };
      this.getDetailList();
    },

    // 获取明细
    getDetailList() {
      this.detailLoading = true;
      this.queryDetail.needType = this.needType;
      listImportDetail(this.queryDetail).then((res) => {
        if (res.code == 200) {
          this.detailLoading = false;
          if (res.rows.length > 0) {
            this.detailTableData = res.rows;
            this.getDecimal();
          } else {
            this.detailTableData = [];
          }

          this.detailTotal = res.total;

          this.detailMaxHeight =
            `${document.documentElement.clientHeight}` - 390;
        }
      });
    },

    //获取物料大类
    getMaterialSort() {
      materialSort().then((res) => {
        this.sortData = res.data;
      });
    },

    //点击业务类型
    handleWorkType(data, index) {
      this.workTypeIndex = index;
      this.queryDetail.workType = data.dictValue;
      this.getDetailList();
    },

    search() {
      this.getDetailList();
    },

    // 连选
    handleContinuity() {
      this.continuityStatus = !this.continuityStatus;
      this.isClose = !this.isClose;
    },

    //批量选择
    handleSelectionChange(row) {
      this.selectData = [];
      if (row.length > 0) {
        this.successStatus = false;
        this.selectData = [...row];
      } else {
        this.selectData = [];
        this.successStatus = true;
      }
    },

    //格式化数量单价金额小数位数
    getDecimal() {
      if (this.detailTableData.length > 0) {
        this.detailTableData.forEach((item) => {
          if (item.price !== null && item.price !== undefined) {
            item.price = parseFloat(item.price).toFixed(this.decimal);
          }
          if (item.surplus !== null && item.surplus !== undefined) {
            item.surplus = parseFloat(item.surplus).toFixed(this.decimal);
          }
          if (item.amount !== null && item.amount !== undefined) {
            item.amount = parseFloat(item.amount).toFixed(this.decimal);
          }
          if (item.wi_quantity !== null && item.wi_quantity !== undefined) {
            item.wi_quantity = parseFloat(item.wi_quantity).toFixed(
              this.decimal
            );
          }
          if (item.surplus !== null && item.surplus !== undefined) {
            item.surplus = parseFloat(item.surplus).toFixed(this.decimal);
          }
          if (item.quantity !== null && item.quantity !== undefined) {
            item.quantity = parseFloat(item.quantity).toFixed(this.decimal);
          }
        });
      }
    },
    // 弹框状态
    selectImportMaterialClose() {
      this.$emit("selectImportMaterialClose");
    },

    //确定选取
    handleImportMaterialSuccess() {
      this.$emit("handleImportMaterialSuccess", this.selectData);
      if (this.isClose == true) {
        this.selectImportMaterialClose();
      }
    },

    // 关闭弹框
    handleClose() {
      this.selectImportMaterialClose();
    },
  },
  filters: {
    //时间格式化
    inMaterTime(date) {
      let time = new Date(date);
      return (
        time.getFullYear() + "-" + (time.getMonth() + 1) + "-" + time.getDate()
      );
    },

    //PP专用
    isPurpose(i) {
      switch (i) {
        case "0":
          return "否";
          break;
        case "1":
          return "是";
          break;
        default:
          return "否";
      }
    },
  },
};
</script>
<style lang="scss">
.order-importMaterial-select {
  .el-dialog__body {
    height: calc(100vh - 250px);
    position: relative;
  }
  .quality-box {
    p {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      width: 145px;
      margin: 0 5px;
    }
  }
  .ma-search {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .el-form-item__content {
      line-height: 32px;
    }
  }
  .el-pagination {
    left: 0;
  }
  .is-plan {
    background: #67c23a !important;
    border-color: #67c23a !important;
    color: #ffffff !important;
    outline: none !important;
  }
  .app-container {
    padding-top: 0;
  }

  .layout-box {
    .el-link.is-underline:hover:after {
      border: none;
    }

    .search-box {
      display: flex;
      margin-bottom: 20px;

      .search-input {
        display: flex;
        margin-right: 15px;

        .input-data {
          min-width: 220px !important;
        }

        .el-input {
          margin-right: 15px;
        }
      }
    }

    .sort-active {
      background: #1890ff !important;
      border-color: #1890ff !important;
      color: #ffffff !important;
    }

    .con-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .material-sort {
      span {
        font-size: 14px;
        padding: 0px 15px;
        background: #f4f4f5;
        color: #999;
        display: inline-block;
        border-radius: 3px;
        margin-left: 5px;
        margin-right: 5px;
        cursor: pointer;
        line-height: 26px;
        border: 1px solid #e9e9eb;
      }
    }
  }

  .ImportMaterial-success {
    position: absolute;
    bottom: 20px;
    right: 40px;

    button {
      padding: 8px 40px;
    }
  }
}
</style>
